To learn JavaScript, we must learn the basics.
In this article, we’ll look at the most basic parts of the JavaScript language.
Target All Elements by Tag Name with querySelectorAll
The document.querySelectorAll method lets us get all the elements with the given selector.
So to get all the elements with the given tag name, we can write the following HTML:
<p>foo.</p>
<p>bar.</p>
<p>baz.</p>
Then we can get all of them and style them by writing:
const pars = document.querySelectorAll('p')
for (const p of pars) {
p.style.fontFamily = "Verdana, Geneva, sans-serif";
}
We get all the p elements with document.querySelectorAll .
Then we loop through each item with the for-of loop and set the style.fontFamily property to set the font family.
Target Some Elements by Tag Name
We can target some elements by tag name with the document.querySelectorAll method since it takes any selector string as an argument.
For example, if we have the following HTML table:
<table>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
</table>
and we want to get all the td elements in the table, we can write:
const tds = document.querySelectorAll('table td')
for (const t of tds) {
t.style.backgroundColor = "pink";
}
We get the td elements within the table element with the table td selector.
Then we loop through the td elements and set the backgroundColor to 'pink' .
The DOM
The DOM stands for Document Object Model. It’s the way that browsers represent the HTML elements with JavaScript.
HTML elements are organized in a tree structure in the DOM.
Each level is indicated by the indentation.
For example, if we have:
<html>
<head>
<title>
Simple document
</title>
</head>
<body>
<p>
hello world
</p>
</body>
</html>
Then the html element is the root of the tree.
The head and body are at the 2nd level.
The title and p elements are at the 3rd level.
The topmost element is the document object.
Therefore html element is the parent of the head and body elements.
The title element is the child of the head element.
And the p element is the child of the body element.
We can find child elements with the DOM methods that we used before like querySelector , querySelectorAll , getElementById and getElementByTagName .
For example, if we have the following HTML:
<html>
<head>
<title>
Simple document
</title>
</head>
<body>
<div id="weather">
<p>Today is sunny.</p>
<p>Yesterday is rainy.</p>
</div>
<div id="density">
<p>City is crowded.</p>
<p>Desert is sparse.</p>
</div>
</body>
</html>
Then if we want to get the ‘Today is sunny’ text, we can write:
const sunny = document.querySelector('#weather p');
console.log(sunny.innerHTML)
We use the #weather p selector with the querySelector method to get the first p element from the div with the ID weather .
Then we get its content with the innerHTML property.
Conclusion
We can get the elements with the document methods.
HTML elements are modeled in the browser with the DOM.
